<template>
	<view>
		<z-paging ref="pagePaging" refresher-only @onRefresh="onRefresh" @scrolltolower="scrolltolower">
			<template #top>
				<view class="status_bar"></view>
			</template>

			<view class="banner">
				<view class='item'>
					<image class="bg" :src="getImageUrl('home_banner_1.png')" mode="widthFix"></image>
					<view class="content">
						<view class="title">缘分配对</view>
						<view class="sub">免费视频</view>
					</view>
					<image class="right" :src="getImageUrl('home_right_1.png')" mode="widthFix"></image>
				</view>
				<view class='item'>
					<image class="bg" :src="getImageUrl('home_banner_2.png')" mode="widthFix"></image>
					<view class="content">
						<view class="title">视频交友</view>
						<view class="sub">快速脱单</view>
					</view>
					<image class="right" :src="getImageUrl('home_right_2.png')" mode="widthFix"></image>
				</view>
			</view>
			<view class="banner">
				<view class='item'>
					<image class="bg" :src="getImageUrl('home_banner_3.png')" mode="widthFix"></image>
					<view class="content">
						<view class="title">邀请有奖</view>
						<view class="sub">领取超多奖励</view>
					</view>
					<image class="right" :src="getImageUrl('home_right_3.png')" mode="widthFix"></image>
				</view>
				<view class='item'>
					<image class="bg" :src="getImageUrl('home_banner_4.png')" mode="widthFix"></image>
					<view class="content">
						<view class="title">心动纸条</view>
						<view class="sub">放纸条抽对象</view>
					</view>
					<image class="right" :src="getImageUrl('home_right_4.png')" mode="widthFix"></image>
				</view>
			</view>

	<view>
		<view style="display: flex; flex-direction: row; background-color: #fff; z-index: 100;position: sticky;top :0;">
			<z-tabs tab-width="80" ref="tabs" :list="tabList" :current="current" @change="tabChange"
				active-color="#222" :active-style="{'font-size':'40rpx', 'font-weight': '700'}"
				:tabs-style="{'width':'300rpx'}" bar-width='20' />
		</view>
		<swiper class="swiper" :style="[{height:swiperHeight+'px'}]" :current="current" @transition="swiperTransition"
			@animationfinish="swiperAnimationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
				<home-list-item ref="swiperList" :tabIndex="index" :currentIndex="current"
					@heightChanged="heightChanged"></home-list-item>
			</swiper-item>
		</swiper>
	</view>


	</z-paging>

	<uni-popup type="bottom" ref="pay" :is-mask-click="false">
		<view class="popup">
			<view class="title">
				为什么要支付
			</view>
			<view class="tip">
				为过滤非诚意用户，避免微商，酒托，广告等骚扰，打造纯净私密的交友空间，保证产品持续稳定运营。需支付一定费用，成为会员
			</view>
			<view class="price">
				￥{{ticketPrice}}
			</view>
			<view class="type" v-for="(item, index) in payTypes" :key="index" @click="onItemPay(index)">
				<image :src="item.icon"></image>
				<view class="tip">{{item.title}}</view>
				<z-checkbox :checked="item.checked"></z-checkbox>
			</view>
			<view>
				<!-- <button type="primary" @click="requestPay">确定支付</button> -->
				<z-button text='找TA确定支付' @click.native="requestPay"></z-button>
			</view>
		</view>
	</uni-popup>
	</view>

</template>

<script>
	import constant from '../../../common/constant';
	export default {
		data() {
			return {
				swiperHeight: 0,
				tabList: ['人气', '活跃'],
				current: 0,
				payTypes: [{
						payType: 1,
						icon: this.getImageUrl('pay_alipay.png'),
						title: '支付宝支付',
						checked: false
					},
					{
						payType: 2,
						icon: this.getImageUrl('pay_wechat.png'),
						title: '微信支付',
						checked: false
					},
				],
				payType: '',
				projectId: 4,
				ticketPrice: '28',
				user: {}
			};
		},
		onLoad() {
			this.requestUser();
			this.getLatlng();
		},
		onShow() {
			setTimeout(() => {
				this.showDialogTicket(); //为啥要延迟，防止读写配置文件慢于
			}, 500)
		},
		methods: {
			//tabs通知swiper切换
			tabChange(index) {
				this._setCurrent(index);
			},
			//下拉刷新时，通知当前显示的列表进行reload操作
			onRefresh() {
				this.$refs.swiperList[this.current].reload(() => {
					//当当前显示的列表刷新结束，结束当前页面的刷新状态
					this.$refs.pagePaging.endRefresh();
				});
			},
			//当滚动到底部时，通知当前显示的列表加载更多
			scrolltolower() {
				this.$refs.swiperList[this.current].doLoadMore();
			},
			//swiper滑动中
			swiperTransition(e) {
				this.$refs.tabs.setDx(e.detail.dx);
			},
			//swiper滑动结束
			swiperAnimationfinish(e) {
				this._setCurrent(e.detail.current);
				this.$refs.tabs.unlockDx();
			},
			//设置swiper的高度
			heightChanged(height) {
				if (height === 0) {
					//默认swiper高度为屏幕可用高度-tabsView高度-slot="top"内view的高度
					//注意：uni.upx2px(80)不是固定的，它等于slot="top"内view的高度，如果slot="top"内view的高度不为80rpx，则需要修改这个值
					height = uni.getSystemInfoSync().windowHeight - uni.upx2px(80);
				}
				this.swiperHeight = height;
			},
			_setCurrent(current) {
				if (current !== this.current) {
					//切换tab时，将上一个tab的数据清空
					this.$refs.swiperList[this.current].clear();
				}
				this.current = current;
			},
			//swiper滑动结束
			swiperAnimationfinish(e) {
				this.current = e.detail.current;
				this.$refs.tabs.unlockDx();
			},
			onItemPay(index) {
				this.payTypes.forEach(item => {
					item.checked = false
				});
				this.payTypes[index].checked = true;
			},
			async showDialogTicket() {
				let showFlag = false;
				let vipManage = uni.getStorageSync("vipManage");
				console.log('vipManage: ', vipManage);
				if (1 == vipManage || 2 == vipManage) {
					let res = await this.$common.get("/api/getLoginUser");
					if (200 == res.code) {
						if (0 != res.data.ticket) {
							if (
								1 == vipManage //门票开
								||
								getApp().globalData.openTicketMin //门票3分钟:已到
								||
								uni.getStorageSync("ticketOver" + uni.getStorageSync('userId'))) //门票3分钟已到：再次启动
							{
								showFlag = true;
								let ticketRes = await this.$common.get("/api/ticketPackage/list");
								if (200 == ticketRes.code) {
									let ticket = ticketRes.data[0]
									this.ticketPrice = ticket.money;
									this.projectId = ticket.id;
								}
							} else {
								getApp().toTicket();
							}
						}
					}
				}
				if (showFlag) {
					uni.hideTabBar()
					this.$refs.pay.open()
				} else {
					uni.showTabBar()
					this.$refs.pay.close()
				}
			},

			async requestPay() {
				let payType = '';
				this.payTypes.forEach(item => {
					if (item.checked) {
						payType = item.payType;
					}
				});
				if (!payType) {
					uni.showToast({
						title: '请选择支付类型',
						icon: 'none'
					})
					return
				}

				let url = '/api/aliPay/tradeWapPay';
				if (2 == payType) {
					url = '/api/wxPay/transactions';
				}
				const params = {
					mobileSpec: 'android',
					userId: uni.getStorageSync('userId'),
					projectType: '3', //支付类型1 (钻石充值)  支付类型2  （会员充值）
					packageId: this.projectId,
				}
				let res = await this.$common.post(url, params);
				if (200 == res.code) {
					const webview = plus.webview.create('', 'custom-webview');
					webview.loadURL(res.data.payUrl, {
						'Referer': 'http://api.ptszyxx.com://'
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			async requestUser() {
				let res = await this.$common.get('/api/getLoginUser');
				if (200 == res.code) {
					this.user = res.data;
					if (0 == this.user.vip) {
						uni.setStorageSync('vip', true)
					} else {
						uni.setStorageSync('vip', false)
					}
				}
			},
			getLatlng() {
				if (!constant.online && uni.getStorageSync('login')) {
					uni.getLocation({
						success: res => {
							// console.log('当前位置的经度：' + res.longitude);
							// console.log('当前位置的纬度：' + res.latitude);
							this.requestUserLatlng(res.latitude, res.longitude)
						}
					});
				}
			},
			async requestUserLatlng(lat, lon) {
				let params = {
					id: uni.getStorageSync('userId'),
					lat: lat,
					lon: lon
				}
				let res = await this.$common.post('/api/user/updateUser', params);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.banner {
		display: flex;
		flex-direction: row;
		padding: 0 30rpx;
		margin: 5rpx;

		.item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			position: relative;
			width: 350rpx;
			height: 100rpx;
			box-sizing: border-box;
			margin: 5rpx;
			padding: 0 20rpx;

			.bg {
				position: absolute;
				top: 0;
				right: 0;
				z-index: -1;
				width: 100%;
				height: 100%;
			}

			.content {
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 100%;
				height: 100%;
				box-sizing: border-box;

				.title {
					font-size: 28rpx;
					color: #fff;
					font-weight: 700;
				}

				.sub {
					font-size: 24rpx;
					color: #fff;
				}
			}

			.right {
				width: 100rpx;
			}
		}
	}

	.swiper {
		height: 100%;
	}

	.popup {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: white;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		width: 100wh;
		height: 550rpx;
		padding: 30rpx;

		.title {
			font-size: 36rpx;
			color: #222;
			line-height: 60rpx;
			height: 60rpx;
			text-align: center;
		}

		.tip {
			font-size: 20rpx;
			color: #888;
		}

		.price {
			font-size: 50rpx;
			color: mediumvioletred;
			text-align: center;
		}

		.type {
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			height: 100rpx;
			font-size: 28rpx;
			color: #222;

			image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.tip {
				font-size: 28rpx;
				color: #555;
				flex: 1;
				text-align: left;
			}

		}
	}
</style>